<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>查看节目下的演员</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../css/font.css">
		<link rel="stylesheet" href="../../css/weadmin.css">
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
		<div class="weadmin-body">
			<table class="layui-table" id="performerList" lay-filter="listPerformer">

			</table>
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">解除绑定</a>
			</script>
		</div>
		<script src="../../lib/jquery-2.1.1/jquery.js"></script>
		<script src="../../js/admin.js"></script>
		<script>
			var proId = localStorage.getItem("message_id_listPerformer");
			layui.extend({
				admin: '{/}../../js/admin'
			});
			layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function() {
				var laydate = layui.laydate //日期
						, laypage = layui.laypage //分页
						, layer = layui.layer //弹层
						, table = layui.table //表格
						, upload = layui.upload //上传



				//执行一个 table 实例
				table.render({
					elem: '#performerList'
					, height: 500
					, url: '/performer/selectAllByProgramId' //数据接口
					,method: 'post'
					, title: '演员表'
					,where:{"proId":proId}
					, page: true //开启分页
					, toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					, totalRow: false //开启合计行
					, cols: [[ //表头
						{type: 'checkbox', fixed: 'left'}
						, {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left', totalRowText: '合计：'}
						, {field: 'name', title: '演员名', width: 200}
						, {field: 'mobile', title: '手机号', width: 200,  totalRow: true}
						, {field: 'createTime', title: '创建时间', width: 200,  totalRow: true}
						,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
					]]
				});

				//监听行工具事件
				table.on('tool(listPerformer)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
							,layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'detail'){
						layer.msg('查看操作');
					} else if(layEvent === 'del'){
						layer.confirm('真的解除绑定么', function(index){
							console.log(obj.data.id,index)
							$.ajax({
								url: '/performProgram/deleteByProIdAndPerId',
								data:{
									"perId":obj.data.id,
									"proId":proId
								},
								success(res){
									obj.del(); //删除对应行（tr）的DOM结构
									layer.close(index);
								},
								error(){
									layer.msg("解除失败")
								}
							})

						});
					}
				});
			});
		</script>
	</body>

</html>